<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>收货地址-白大师</title>
    <style>
        body{
            position: relative;
        }
        body>section{
            margin-top: 30px;
            position: fixed;
        }
        .list-inline {
            font-size: 12px;
            height: 15px;
        }

        .navbar-brand {
            background-repeat: no-repeat;
            background-size: 200px 100px;
        }

        .font-1 > p > a:hover {
            color: #f40;
        }

        .font-1 > p > a {
            color: black;
        }

        .font-1 {
            position: absolute;
            margin-left: 270px;
            font-size: 13px;
        }

        #f1 {
            font-size: 16px;
            color: #f40;
            position: relative;
            margin-left: 270px;
            margin-top: -14px;
        }

        #f2 {
            width: 850px;
            position: absolute;
            margin-left: 400px;
            height: 20px;
            font-size: 16px;
            margin-top: -15px;
        }

        #f3 {
            font-size: 14px;
            margin-top: -9px;
            margin-left: -5px;
        }

        #f4 {
            position: absolute;
            margin-left: 400px;
            margin-top: 35px;
            font-size: 12px;
            color: #f40;
        }

        #f5 {
            width: 420px;
            position: absolute;
            margin-left: 410px;
            height: 30px;
            font-size: 16px;
            margin-top: 70px;
        }

        #f6 {
            font-size: 13px;
            margin-top: 7px;
            margin-left: 12px;
            color: #666666;


        }

        #f7 {
            position: absolute;
            margin-left: 410px;
            font-size: 16px;
            margin-top: 120px;
            color: #666666;
            font-size: 10px;
        }

        .logo {
            color: #f40;
            font-size: 12px;
        }

        .form-control.bor1 {
            margin-left: -10px;
            width: 100px;
            font-size: 5px;
            color: #666666;

        }

        #bor2 {
            margin-left: 495px;
            margin-top: 185px;
            height: 50px;
            width: 335px;

        }

        #bor3 {
            font-size: 12px;
        }

        #d1 {
            margin-left: 495px;
            margin-top: 110px;
            font-size: 10px;
            color: #f40;
        }

        #f15 {
            position: absolute;
            margin-left: 495px;
            margin-top: 221px;
            width: 335px;
            font-size: 5px;
        }

        #f19 {
            margin-left: 495px;
            margin-top: 271px;
            width: 335px;
            font-size: 5px;
        }

        #f11 {
            position: absolute;
            margin-left: 415px;
            font-size: 16px;
            margin-top: 200px;
            color: #666666;
            font-size: 10px;
            color: #f40;
        }

        #f17 {
            position: absolute;
            margin-left: 415px;
            font-size: 16px;
            margin-top: 280px;
            color: #f40;
        }

        #f20 {
            position: absolute;
            margin-left: 410px;
            font-size: 16px;
            margin-top: 300px;
            color: #f40;
        }

        #f23 {
            position: absolute;
            margin-left: 495px;
            margin-top: 340px;
        }

        #f14 {
            position: absolute;
            margin-left: 427px;

            margin-top: 240px;
            color: #666666;
            font-size: 10px;
        }

        #f18 {
            position: absolute;
            margin-left: 427px;
            font-size: 10px;
            margin-top: 280px;
            color: #666666;
        }

        #f22 {
            position: relative;
            margin-top: -18px;
            font-size: 10px;
            color: #666666;
            margin-left: -8px;
        }

        #f12 {
            position: absolute;
            margin-left: 427px;
            margin-top: 200px;
            color: #666666;
            font-size: 10px;
        }

        #inlineCheckbox1 {
            width: 17px;
            height: 17px;

        }

        #f24 {
            width: 850px;
            height: 45px;
            margin-top: 15px;
            margin-left: -90px;
        }

        #addressApp {
            position: absolute;
            margin-left: 407px;
            margin-top: 480px;
            width: 850px;

        }

        #bor4 thead {
            background-color: #ebecf0;
        }

        #bor4 tbody tr:hover {
            background-color: #ebecf0;
        }

        /*#select1{*/
        /*    margin-top: 5px;*/
        /*    background-color: #ebecf0;*/
        /*}*/
        /*#addressFormOne{*/
        /*    display: none;*/
        /*}*/


        /*#addressFormTwo{*/
        /*    display: none;*/
        /*}*/


    </style>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/header.css">
</head>
<body>
<!--<ul class="list-inline">
&lt;!&ndash;    <li style="padding: 0px 0px 0px 192px"><div class="dropdown">&ndash;&gt;
&lt;!&ndash;        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="font-size: 12px">tb111111111&ndash;&gt;
&lt;!&ndash;            <span class="caret"></span>&ndash;&gt;
&lt;!&ndash;        </button>&ndash;&gt;
&lt;!&ndash;        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">Java</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation" class="divider"></li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;        </ul>&ndash;&gt;
&lt;!&ndash;    </div>&ndash;&gt;
&lt;!&ndash;    </li>&ndash;&gt;
    <li style="padding: 0px 0px 0px 162px">
&lt;!&ndash;        <select class="form-control" style="margin-top: 5px;background-color: #ebecf0">&ndash;&gt;
&lt;!&ndash;            <option value="" disabled selected style="display: none"  >亲爱的{{user.username}}用户</option>&ndash;&gt;
&lt;!&ndash;        </select>&ndash;&gt;
        <div style="display: inline" id="customerName">
            <a href="/login.html" v-text="customerName"></a>
        </div>
    </li>
    <li style="padding: 10px 0px 0px 20px"><a >手机逛淘宝</a></li>
    <li style="padding: 10px 0px 0px 20px"><a>网页无障碍</a></li>
    <li style="padding: 10px 0px 0px 260px"><a>淘宝网首页</a></li>
&lt;!&ndash;    <li style="padding: 0px 0px 0px 20px"><div class="dropdown">&ndash;&gt;
&lt;!&ndash;        <button type="button" class="btn dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" style="font-size: 12px">我的淘宝&ndash;&gt;
&lt;!&ndash;            <span class="caret"></span>&ndash;&gt;
&lt;!&ndash;        </button>&ndash;&gt;
&lt;!&ndash;        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">Java</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation" class="divider"></li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;        </ul>&ndash;&gt;
&lt;!&ndash;    </div>&ndash;&gt;
&lt;!&ndash;    </li>&ndash;&gt;
&lt;!&ndash;    <li style="padding: 10px 0px 0px 22px"><a>我的淘宝</a></li>&ndash;&gt;
    <li style="padding: 0px 0px 0px 20px">
        <select class="form-control" style="font-size: 12px;width: 100px;background-color: #ebecf0">
            <option value="" disabled selected style="display: none" >我的淘宝</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </li>
    <li style="padding: 10px 0px 0px 20px"><img src="js/star.jpg" width="18px" height="18px"><a>购物车</a></li>
    <li style="padding: 0px 0px 0px 20px">
        <select class="form-control" style="font-size: 12px;width: 90px;background-color: #ebecf0">
            <option value="" disabled selected style="display: none" >收藏夹</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </li>
&lt;!&ndash;    <li style="padding: 0px 0px 0px 20px"><div class="dropdown">&ndash;&gt;
&lt;!&ndash;        <button type="button" class="btn dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown" style="font-size: 12px">收藏夹&ndash;&gt;
&lt;!&ndash;            <span class="caret"></span>&ndash;&gt;
&lt;!&ndash;        </button>&ndash;&gt;
&lt;!&ndash;        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">Java</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation" class="divider"></li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;        </ul>&ndash;&gt;
&lt;!&ndash;    </div>&ndash;&gt;
&lt;!&ndash;    </li>&ndash;&gt;
&lt;!&ndash;    <li style="padding: 10px 0px 0px 20px"><img src="star.jpg" width="18px" height="18px"><a>收藏夹</a></li>&ndash;&gt;
    <li style="padding: 10px 0px 0px 25px"><a>商品分类</a></li>
    <li style="padding: 0px 0px 0px 20px">
        <select class="form-control" style="font-size: 12px;width: 120px;background-color: #ebecf0">
            <option value="" disabled selected style="display: none" >千牛卖家中心</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </li>
&lt;!&ndash;    <li style="padding: 0px 0px 0px 25px"><div class="dropdown">&ndash;&gt;
&lt;!&ndash;        <button type="button" class="btn dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" style="font-size: 12px">千牛卖家中心&ndash;&gt;
&lt;!&ndash;            <span class="caret"></span>&ndash;&gt;
&lt;!&ndash;        </button>&ndash;&gt;
&lt;!&ndash;        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">Java</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation" class="divider"></li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;        </ul>&ndash;&gt;
&lt;!&ndash;    </div>&ndash;&gt;
&lt;!&ndash;    </li>&ndash;&gt;
&lt;!&ndash;    <li style="padding: 10px 0px 0px 30px"><a>千牛卖家中心</a></li>&ndash;&gt;
    <li style="padding: 0px 0px 0px 20px">
        <select class="form-control" style="font-size: 12px;width: 120px;background-color: #ebecf0">
            <option value="" disabled selected style="display: none" >联系客服</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </li>
&lt;!&ndash;    <li style="padding: 0px 0px 0px 25px"><div class="dropdown">&ndash;&gt;
&lt;!&ndash;        <button type="button" class="btn dropdown-toggle" id="dropdownMenu5" data-toggle="dropdown" style="font-size: 12px">联系客服&ndash;&gt;
&lt;!&ndash;            <span class="caret"></span>&ndash;&gt;
&lt;!&ndash;        </button>&ndash;&gt;
&lt;!&ndash;        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">Java</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation" class="divider"></li>&ndash;&gt;
&lt;!&ndash;            <li role="presentation">&ndash;&gt;
&lt;!&ndash;                <a role="menuitem" tabindex="-1" href="#">分离的链接</a>&ndash;&gt;
&lt;!&ndash;            </li>&ndash;&gt;
&lt;!&ndash;        </ul>&ndash;&gt;
&lt;!&ndash;    </div>&ndash;&gt;
&lt;!&ndash;    </li>&ndash;&gt;
&lt;!&ndash;    <li style="padding: 10px 0px 0px 30px"><a>联系客服</a></li>&ndash;&gt;
</ul>
<br>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        &lt;!&ndash; Brand and toggle get grouped for better mobile display &ndash;&gt;
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img class="navbar-brand" src=""style="margin-left: 150px"></img>
        </div>
        &lt;!&ndash; Collect the nav links, forms, and other content for toggling &ndash;&gt;
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active" style="margin-left: 220px;font-size: 12px"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size: 12px">账号设置 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </ul>
                </li>
&lt;!&ndash;                <li class="dropdown">&ndash;&gt;
&lt;!&ndash;                    <select class="form-control" style="font-size: 12px;width: 120px;background-color: #ebecf0">&ndash;&gt;
&lt;!&ndash;&lt;!&ndash;                        <option value="" disabled selected style="display: none" >账号设置</option>&ndash;&gt;&ndash;&gt;
&lt;!&ndash;                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size: 12px">账号设置 <span class="caret"></span></a>&ndash;&gt;&ndash;&gt;
&lt;!&ndash;                        <option>2</option>&ndash;&gt;
&lt;!&ndash;                        <option>3</option>&ndash;&gt;
&lt;!&ndash;                        <option>4</option>&ndash;&gt;
&lt;!&ndash;                        <option>5</option>&ndash;&gt;
&lt;!&ndash;                    </select>&ndash;&gt;
&lt;!&ndash;                </li>&ndash;&gt;
            </ul>-->
<!--头部分-->
<header>
    <myheader id="tagsApp" :category="category" :user="user"></myheader>
</header>
<section>
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" style="margin-left: 550px;width: 250px">
        </div>
        <button type="submit" class="btn btn-default" style="font-size: 12px">搜索</button>
    </form>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>
    <div>
        <p id="f1"><a></a>账号信息</p>
        <div class="font-1">
            <p><a href="persondata.html">个人资料</a></p>
            <p><a href="">个人成长信息</a></p>
            <p><a href="">个人交易信息</a></p>
            <p><a href="address.html">收货地址</a></p>
            <p><a href="cart.html">购物车</a></p>
            <p><a href="">订单展示</a></p>

        </div>
    </div>

    <div id="f2" class="alert alert-info" role="alert"><p id="f3">收货地址</p></div>
    <p id="f4">新增收货地址</p>
    <div id="f5" class="bg-warning" role="alert">
        <ul id="f6" class="list-inline">
            <li>当前配送至</li>
            <li style="padding: 0px 0px 0px 10px;color: #2e2e2e;font-weight: bold">中国大陆</li>
            <li style="padding: 0px 0px 7px 215px" ;>
                <!--        <nav aria-label="...">-->
                <!--                <li><a href="#" style="font-size: 13px">切换 <span  aria-hidden="true">&rarr;</span></a></li>-->
                <!--        </nav>-->
            </li>
        </ul>
    </div>
    <div id="addressFormOne">
        <form class="form-horizontal" action="/registerAddress" method="post"
              @submit.prevent="addAddress()" id="addAddressForm">
            <ul id="f7" class="list-inline ">
                <li id="f8" class="logo">*</li>
                <li style="padding: 0px 20px 15px 0px ;font-size: 10px">地址信息：</li>
                <li>
                    <select name="provinceName" class="form-control bor1" v-model="provinceActive"
                            @change="getCityNames($event)">
                        <!--@click="getCityNames(province.id)"  @change="getCityNames($event)" onchange="getCityNames(this)"-->
                        <option v-for="(province,index) in provinceVo" :value="province.provinceName" :key="index"
                        >
                            {{province.provinceName}}
                        </option>
                    </select>
                    <!--                <select name="provinceName" class="form-control bor1"-->
                    <!--                v-model="provinceName">-->
                    <!--                    <option   disabled selected   >省</option>-->
                    <!--                    <option value="福建省">福建省</option>-->
                    <!--                    <option value="四川省">四川省</option>-->
                    <!--                    <option value="4">4</option>-->
                    <!--                    <option value="5">5</option>-->
                    <!--                </select>-->
                </li>
                <li>
                    <select name="cityName" class="form-control bor1" v-model="cityActive"
                            @change="getZoneNames($event)">
                        <!--                    <option   disabled selected   >市</option>-->
                        <option v-for="(city,index) in cityVo" :value="city.cityName" :key="index"
                        >
                            {{city.cityName}}
                        </option>
                    </select>
                </li>
                <li>
                    <select name="zoneName" class="form-control bor1" v-model="zoneActive"
                            @change="showZoneNames($event)">
                        <!--                    <option  disabled selected   >区</option>-->
                        <option v-for="(zone,index) in zoneVo" :value="zone.zoneName" :key="index">
                            {{zone.zoneName}}
                        </option>

                    </select>
                </li>
            </ul>
            <ul id="f10" class="list-inline">
                <li id="f11" class="logo">*</li>
                <li id="f12">详细地址：</li>
                <li>
                <textarea id="bor2" name="street" multiple class="form-control" rows="3"
                          v-model="street" placeholder="请输入详细地址"></textarea>
                </li>
            </ul>
            <ul id="f13" class="list-inline">
                <li id="f14">邮政编码：</li>
                <li><input id="f15" name="postcode" type="text" class="form-control" v-model="postcode"
                           placeholder="请填写邮编"></li>
                <!--        <li><input id="f15" type="text" class="form-control" placeholder="长度不超过25个字符"></li>-->
                <!--        <li><input id="f15" type="text"  class="form-control" placeholder="请填写邮编"></li>-->
            </ul>
            <!--<li><input id="f15" type="text" style="margin-top: 100px" class="form-control" placeholder="请填写邮编"></li>-->
            <ul id="f16" class="list-inline">
                <li id="f17" class="logo">*</li>
                <li id="f18">收货人姓名:</li>
                <li id="querySelector"><input name="customerName" id="f19" type="text" class="form-control"
                                              placeholder="长度不超过25个字符"
                                              v-model="customerName"></li>
            </ul>
            <ul style="position: absolute;
            margin-left: 410px;
            font-size: 16px;
            margin-top: 300px;
            color: #f40;" class="list-inline">
                <li class="logo">*</li>
                <li id="f22">手机号码：</li>
                <li>
                    <select id="bor3" class="form-control">
                        <option value="" disabled selected style="display: none">中国大陆+86</option>
                        <option>中国大陆+86</option>
                        <option>英国+44</option>
                        <option>澳大利亚+61</option>
                        <option>新加坡+65</option>
                    </select>
                </li>
                <li id="phone"><input type="text" name="phone" class="form-control"
                                      v-model="phone" placeholder="电话号码、手机号码必须填一项" style="font-size: 7px;width: 200px">
                </li>
            </ul>
            <ul id="f23" class="list-inline">
                <li>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="1" name="status" v-model="status">
                        <div style="margin-top: 5px">设置为默认收货地址</div>
                    </label>
                </li>
                <p>
                    <input type="submit" value="保存" class="btn btn-info"
                           style="background-color: #0aa1ed;margin-top: 12px;margin-left: 5px;width: 50px;font-size: 10px">
                </p>
                <p>
                <ul id="f24" class="bg-danger">
                    <li class="glyphicon glyphicon-info-sign"
                        style="margin-top: 18px;color: #f0ad4e;margin-left: -28px"></li>
                    <ul style="margin-top: -18px;margin-left: -50px;font-size: 14px;font-weight: normal">
                        已保存了4条地址,还能保存16条地址
                    </ul>
                </ul>
                </p>
            </ul>
        </form>
    </div>
    <!-- 以下是我的provinceNames"第二份编辑表单 -->
    <div id="addressFormTwo"><!-- "  -->
        <form class="form-horizontal" action="" method="post" @submit.prevent="updateAddressFormTwo()"
              id="updateAddressForm">
            <div>
                <ul style="position: absolute;
                margin-left: 410px;
                font-size: 16px;
                margin-top: 120px;
                color: #666666;
                font-size: 10px;" class="list-inline ">
                    <li class="logo">*</li>
                    <li style="padding: 0px 20px 15px 0px ;font-size: 10px">地址信息：</li>
                    <li>
                        <select name="provinceName" class="form-control bor1" v-model="provinceActive"
                                @change="getCityNames($event)">
                            <!--@click="getCityNames(province.id)"  @change="getCityNames($event)" onchange="getCityNames(this)"-->
                            <option v-for="(province,index) in provinceVo" :value="province.provinceName" :key="index"
                            >
                                {{province.provinceName}}
                            </option>
                            <!--                        {{province.provinceName}}</option>-->
                            <!--                    <option value="四川省">四川省</option>-->
                            <!--                    <option value="4">4</option     >-->
                            <!--                    <option value="5">5</option>-->
                        </select>
                    </li>
                    <li>
                        <select name="cityName" class="form-control bor1" v-model="cityActive"
                                @change="getZoneNames($event)">
                            <!--                    <option   disabled selected   >市</option>-->
                            <option v-for="(city,index) in cityVo" :value="city.cityName" :key="index"
                            >
                                {{city.cityName}}
                            </option>
                            <!--                    <option value="成都市">成都市</option>-->
                            <!--                    <option value="9">4</option>-->
                            <!--                    <option value="10">5</option>-->
                        </select>
                    </li>
                    <li>
                        <select name="zoneName" class="form-control bor1">
                            <!--                    <option  disabled selected   >区</option>-->
                            <option v-for="zone in zoneVo" :value="zone.zoneName" :selected="zone.zoneName">
                                {{zone.zoneName}}
                            </option>
                            <!--                    <option value="武侯区">武侯区</option>-->
                            <!--                    <option value="13">4</option>-->
                            <!--                    <option value="14">5</option>-->
                        </select>
                    </li>
                </ul>
            </div>
            <ul class="list-inline">
                <li style="position: absolute;
                margin-left: 415px;
                font-size: 16px;
                margin-top: 200px;
                color: #666666;
                font-size: 10px;
                color: #f40;" class="logo">*
                </li>
                <li style="position: absolute;
                margin-left: 427px;
                margin-top: 200px;
                color: #666666;
                font-size: 10px;">详细地址：
                </li>
                <li>
                    <textarea style="margin-left: 495px;
                                margin-top: 185px;
                                height: 50px;
                width: 335px;" name="street" multiple class="form-control" rows="3"
                              placeholder="请输入详细地址"></textarea>
                </li>
            </ul>
            <ul class="list-inline">
                <li style="position: absolute;
                margin-left: 427px;
                margin-top: 240px;
                color: #666666;
                font-size: 10px;">邮政编码：
                </li>
                <li><input style="position: absolute;
                margin-left: 495px;
                margin-top: 221px;
                width: 335px;
                font-size: 5px;" name="postcode" type="text" class="form-control" placeholder="请填写邮编"></li>
                <!--        <li><input id="f15" type="text" class="form-control" placeholder="长度不超过25个字符"></li>-->
                <!--        <li><input id="f15" type="text"  class="form-control" placeholder="请填写邮编"></li>-->
            </ul>
            <!--<li><input id="f15" type="text" style="margin-top: 100px" class="form-control" placeholder="请填写邮编"></li>-->
            <ul class="list-inline">
                <li style="position: absolute;
                margin-left: 415px;
                font-size: 16px;
                margin-top: 280px;
                color: #f40;" class="logo">*
                </li>
                <li style="position: absolute;
                margin-left: 427px;
                font-size: 10px;
                margin-top: 280px;
                color: #666666;">收货人姓名:
                </li>
                <li><input name="customerName" style="margin-left: 495px;
                margin-top: 271px;
                width: 335px;
                font-size: 5px;" type="text" class="form-control" placeholder="长度不超过25个字符"
                ></li>
            </ul>
            <ul id="f20" class="list-inline">
                <li id="f21" class="logo">*</li>
                <li style="position: relative;
                margin-top: -18px;
                font-size: 10px;
                color: #666666;
                margin-left: -8px;">手机号码：
                </li>
                <li>
                    <select style="font-size: 12px;" class="form-control">
                        <option value="" disabled selected style="display: none">中国大陆+86</option>
                        <option>中国大陆+86</option>
                        <option>英国+44</option>
                        <option>澳大利亚+61</option>
                        <option>新加坡+65</option>
                    </select>
                </li>
                <li><input type="text" name="phone" class="form-control"
                           placeholder="电话号码、手机号码必须填一项" style="font-size: 7px;width: 200px"></li>
            </ul>
            <ul style="position: absolute;
                margin-left: 495px;
                margin-top: 340px;" class="list-inline">
                <li>
                    <label class="checkbox-inline">
                        <input type="checkbox" style="width: 17px;
                height: 17px;" value="1" name="status">
                        <div style="margin-top: 5px">设置为默认收货地址</div>
                    </label>
                </li>
                <p>
                    <input type="submit" value="保存" class="btn btn-info"
                           style="background-color: #0aa1ed;margin-top: 12px;margin-left: 5px;width: 50px;font-size: 10px">
                    <input type="button" value="id" style="display: none" name="id">
                </p>
                <p>
                <ul style="width: 850px;
                height: 45px;
                margin-top: 15px;
                margin-left: -90px;" class="bg-danger">
                    <li class="glyphicon glyphicon-info-sign"
                        style="margin-top: 18px;color: #f0ad4e;margin-left: -28px"></li>
                    <ul style="margin-top: -18px;margin-left: -50px;font-size: 14px;font-weight: normal">
                        已保存了4条地址,还能保存16条地址
                    </ul>
                </ul>
                </p>
            </ul>
        </form>
    </div>
    <table class="table table-striped " id="addressApp">
        <thead>
        <tr>
            <th>收货人</th>
            <th>所在地区</th>
            <th>详细地址</th>
            <th>邮编</th>
            <th>电话/手机</th>
            <th>操作</th>
            <th>设置默认地址</th>
        </tr>
        </thead>
        <div>
            <tr v-for="(address,index) in addresses">
                <td v-text="address.customerName">z</td>
                <td v-text="address.provinceName+address.cityName+address.zoneName">Bangalore</td>
                <td v-text="address.street">560001</td>
                <td v-text="address.postcode">560001</td>
                <td><span v-text="address.phone">411027</span></td>
                <td><a @click="getAddressToForm(address,address.id)" href="javascript:void(0)">修改</a> | <a
                        @click="removeAddress(address.id,index,addresses)" href="javascript:void (0)">删除</a></td>
                <td><a href="" v-show="address.status==1">默认地址</a>
                    <a href="" v-show="address.status==0">设置为默认地址</a></td>
                <!--        <td v-show="address.status==0">设为默认地址</td>-->
            </tr>
            <!--    <tr>-->
            <!--        <td>Sachin</td>-->
            <!--        <td>Mumbai</td>-->
            <!--        <td>400003</td>-->
            <!--        <td>400003</td>-->
            <!--        <td>400003</td>-->
            <!--        <td><a href="" name="update">修改</a>  |  <a href="" name="delete">删除</a></td>-->
            <!--        <td><a>设为默认</a></td>-->
            <!--    </tr>-->
            <!--    <tr >-->
            <!--        <td v-text="address.customerName">Uma</td>-->
            <!--        <td v-text="address.provinceName+address.cityName+address.zoneName">Pune</td>-->
            <!--        <td v-text="address.street">411027</td>-->


            <!--        <td v-text="address.postcode">411027</td>-->
            <!--        <td><span v-text="address.phone">411027</span></td>-->
            <!--        <td><a href="" name="update">修改</a>  |  <a href="" name="delete">删除</a></td>-->
            <!--        <td><a>设为默认</a></td>-->
            <!--    </tr>-->
        </div>
    </table>
    </div>
</section>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/address.js"></script>
<script src="js/utils.js"></script>
<script src="js/add.js"></script>
<script src="js/customerName.js"></script>
<script src="js/updateAdd.js"></script>
<!--<script src="js/selectAddressOption.js"></script>-->
<!--<script>-->
<!--    $(".tr").click(function () {-->
<!--        $(this).hide();-->
<!--    })-->
<!--</script>-->
<!--<script src="js/customerName.js"></script>-->
</body>

<script src="my/js/header.js"></script>
<script src="my/js/headerApp.js"></script>
</html>
